草庐IT

Vue3 组件

全部标签

javascript - 根据数组的计数 react 迭代和插入组件

假设我有一个数组vararr=["one","two","three","four"];我有一个组件卡片容器classCardContainerextendsReact.Component{render(){return();}}我想做的是根据数组“arr”的长度/计数创建多个Card组件,并且从数组中设置Card组件中的div文本。classCardextendsReact.Component{render(){return();}}所以我的输出将是4张卡片,分别打印在每张卡片上的数组值。这是我想出来的,但没有成功classCardContainerextendsReact.Comp

javascript - 从 vue 中的子组件访问 key

根据Vuedocs,在v-for中使用自定义组件需要绑定(bind)一个键:我想在子组件(task-card)中使用该键,但既不使用this.key也不添加key作为Prop(是Vue的保留关键字)有效。有没有办法在不传递另一个值为“i”的Prop的情况下做到这一点?目前正在使用"vue":"^2.5.9"。 最佳答案 如果你想将数据传递给child,你应该使用Prop(key是保留的,所以你必须给它命名)。否则,您可以通过this.$vnode.key访问组件内vnode上的key。Vue3对于Vue3,API已更改。您需要像这样

javascript - 在 Vue.js 中隐藏 div onclick

以下jQuery的Vue.js等价物是什么?$('.btn').click(function(){$('.hideMe').hide()}); 最佳答案 jQuery开箱即用,Vue.js则不然。要初始化Vue.js组件或应用程序,您必须将该组件及其数据绑定(bind)到模板中的一个特定HTML标记。在此示例中,指定的元素是并通过el:#app定位.你将从jQuery中了解到这一点。在声明了一些保存切换状态的变量之后,在本例中为isHidden,初始状态为false并且必须在data中声明对象。其余的是Vue特定的代码,如v-on:

angular - 如何将点击事件绑定(bind)到整个组件(又名 :host)?

我有一个容器组件ContainerComponent,其中包含一些子组件ChildComponent,使用*ngFor生成。ContainerComponent模板:ChildComponent模板:{{child.name}}{{child.data}}对于ChildComponent,我定义了一个样式表,我可以在其中使用:host访问整个组件主体,如here所述.有了这个,我为ChildComponent创建了样式::host{display:block;width:400px;height:300px;}现在,我想在每个ChildComponent(整个组件)上绑定(bind)(

javascript - (Vue.js) 相同组件不同路由

我想在Vue.js应用程序中为不同的路由使用相同的组件。我目前有这样的东西:ma​​in.jsconstroutes=[{path:'/route-1',name:'route-1',component:MyComponent},{path:'/route-2',name:'route-2',component:MyComponent},{path:'/route-3',name:'route-3',component:MyComponent},]constrouter=newVueRouter({routes})我的组件.vueRoute1Route2Route3当我在浏览器中手动输

javascript - this.$root.$emit 在 Vue 中不起作用

我想在根组件上发出一个事件,并在根组件中监听。在子组件的子组件中,我这样做:this.$root.$emit('access-token',accessToken);在根组件(顶级组件,第一个加载)中我这样做(编辑:这是在mounted()方法中):this.$on('access-token',this.setAccessToken);虽然它不会对事件使用react。为什么? 最佳答案 您没有为事件$on使用$root改变这个:this.$on('access-token',this.setAccessToken);为此:this

javascript - 访问发送到组件的 props 以及 Redux 状态数据

通常您可以访问父组件发送给子组件的Prop。但是,当在子组件上使用redux时,父级发送的props会因使用“connect”方法而丢失,该方法将redux状态映射到组件props。例如:声明一个具有属性的组件:在没有redux的情况下访问子组件,工作正常:this.props.prop1或this.props.prop2相同的语句将给出undefined如果使用redux状态会出错。 最佳答案 自己的组件Prop可作为mapStateToProps函数的第二个参数://ParentComponent.js//...othercom

javascript - 如何正确使用带有 lodash debounce 的 Vue JS watch

我正在使用lodash在组件上调用去抖功能,如下所示:...import_from'lodash';exportdefault{store,data:()=>{return{foo:"",}},watch:{searchStr:_.debounce(this.default.methods.checkSearchStr(str),100)},methods:{checkSearchStr(string){console.log(this.foo)//问题1是我的方法checkSearchStr不知道foo问题2是我的商店也是undefined为什么我的方法在通过_.debounce调用

javascript - 正确实现 Vue.js + DataTables

我正在尝试实现Vue.js+jQuery的数据表,但发生了一件奇怪的事情。在firefox上检查这个fiddle(不适用于chrome):http://jsfiddle.net/chrislandeza/xgv8c01y/当我更改DataTable的状态时(例如排序、搜索等):列表中新增数据消失DOM没有读取指令或vue属性我很确定任何尝试混合使用vue.js和数据表的人都遇到过这个问题。你做了什么来解决这个问题?或者是否有一个纯Vue.js脚本/插件具有与jquery的DataTable相同(或接近)的功能?(分页、搜索、排序、要显示的条目数等)。这是上面fiddle的代码:HTML

javascript - vue.js 2 中哪个更好,使用 v-if 还是 v-show?

我在一个使用vue2的项目中工作。我需要知道在哪种情况下性能更好:使用v-if还是v-show?。我有一个长列表,每个项目的列表都有一个隐藏的表单,我需要显示和隐藏它才能单击包含每个项目列表的按钮。v-show的切换类或使用v-if添加和删除表单哪个更好? 最佳答案 tl;dr假设问题完全是关于性能的:v-show:昂贵的初始加载,便宜的切换,v-if:初始加载成本低,切换成本高。EvanYou在VueJS论坛上提供了更深入的答案v-showalwayscompilesandrenderseverything-itsimplyadd